<template>
  <div class="app-container">
    <div class="filter-container">
      <addPage></addPage>
    </div>

    <tree-table :data="data" :evalFunc="func" :evalArgs="args" :expandAll="expandAll" border>
      <el-table-column label="id">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="页面">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{scope.row.name}}</span>
          <el-tag>{{scope.row.left}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="角色">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{scope.row.meta.roles}}</span>
          <el-tag>{{scope.row.right}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <editPage v-bind:row_data="scope.row"></editPage>
          <el-button  @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>


  </div>
</template>

<script>
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-14:54
*/
import treeTable from '@/components/TreeTable'
import treeToArray from './customEval'
import { getPage } from '@/api/shop_admin_auth/adminPage'
import addPage from './addPage'
import editPage from './editPage'
import store from '@/store'
export default {
  created: function() {
    getPage(store.getters.token).then(response => {
      this.data = response.data.data
    })
  },
  name: 'customTreeTableDemo',
  components: { treeTable, addPage, editPage },
  data() {
    return {
      func: treeToArray,
      expandAll: true,
      data: [],
      args: [null, null, 'left']
    }
  },
  methods: {
    message(row) {
      this.$message.info(row.name)
    },
    del(id) {
      this.$message.info('正在删除' + id)
    }
  }
}

</script>
